<template>
  <div>
    <!-- 显示当前评论的cell -->
    <van-cell>
      <div class="cmt-box">
        <van-image fit="cover" round :src="item.aut_photo" />
        <div class="content-box">
          <div class="name">{{ item.aut_name }}</div>
          <div class="content">{{ item.content }}</div>
          <div class="time-box">
            <span class="time">{{ item.pubdate | relvTime }}</span>
          </div>
        </div>
      </div>
    </van-cell>

    <van-divider>回复列表</van-divider>

    <!-- list -->
    <!--
        当loading为true不调用
        当finished为true也不调用
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <div class="cmt-box">
          <van-image fit="cover" round :src="item.aut_photo" />
          <div class="content-box">
            <div class="name">{{ item.aut_name }}</div>
            <div class="content">{{ item.content }}</div>
            <div class="time-box">
              <span class="time">{{ item.pubdate | relvTime }}</span>
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>
    <!-- 固定定位的div，里面放输入框和按钮 -->
    <div class="input-box">
      <van-field
        @keyup.enter="send"
        v-model="cmt"
        center
        clearable
        placeholder="请输入评论内容"
      >
        <template #button>
          <van-button @click="send" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { cmtListAPI, sendCmtAPI } from '@/api/comment'
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      cmt: '',
      offset: null
    }
  },
  methods: {
    async onLoad () {
      // 调用，发请求获取数据
      const res = await cmtListAPI({
        type: 'c',
        source: this.item.com_id,
        // offset如果不传永远是查第一页
        offset: this.offset
      })

      // 保存last_id作为下次查询的起点
      this.offset = res.data.last_id

      // 添加到数组
      this.list.push(...res.data.results)
      // 结束本次加载状态
      this.loading = false
      // 判断是否全部加载完
      if (this.list.length >= res.data.total_count) {
        this.finished = true
      }
    },

    async send () {
      // 1. 非空判断
      if (this.cmt.trim() === '') return this.$toast('请输入内容')
      // 2. 发请求
      const res = await sendCmtAPI({
        // 如果是评论，就传文章id，如果是回复就传评论id
        target: this.item.com_id,
        content: this.cmt,
        art_id: this.$route.params.id
      })

      // 直接加到list最上面
      this.list.unshift(res.data.new_obj)
      // 清空输入内容
      this.cmt = ''
      // 让当前评论的回复数量+1
      this.$emit('add')
    }
  }
}
</script>

<style lang="less" scoped>
.cmt-box {
  display: flex;
  .van-image {
    width: 40px;
    height: 40px;
  }
  .content-box {
    flex: 1;
    margin-left: 10px;
    .name {
      color: #466b9d;
    }
    .time-box {
      .time {
        color: gray;
        font-size: 12px;
      }
      .van-button {
        vertical-align: middle;
        margin-left: 15px;
      }
    }
  }
}
.input-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
</style>
